<%--
  Created by IntelliJ IDEA.
  User: xiong
  Date: 2020/7/14
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>书籍详情页面</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="/layui/jquery-3.5.1.min.js"></script>
</head>
<style>
    .head {
        FONT-WEIGHT: 600;
        height: 40px;
    }

    thead {
        FONT-WEIGHT: 600;
    }

    .head button {

    }

    .main {
        width: 100%;
    }
</style>
<body>
<div class="layui-main main">
    <div class="layui-row head">
        <input type="text" placeholder="输入书籍名称" value="" id="Searchinput">
        <button class="layui-btn" style="margin-left: 20px" onclick="search()">
            <i class="layui-icon">&#xe615;</i>点击搜索
        </button>

        <button type="button" class="layui-btn" onclick="addBook()">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
    </div>
    <div class="tablecontent">
        <table class="layui-table">
            <thead>
            <tr>
                <td>
                    书籍名称
                </td>
                <td>
                    书籍价格
                </td>
                <td>
                    出版社
                </td>
                <td>
                    作者
                </td>
                <td>
                    描述
                </td>
                <td>
                    操作
                </td>
            </tr>
            </thead>

            <tbody>
            <c:forEach items="${book}" var="bok">
                <tr>
                    <td>
                            ${bok.bname}
                    </td>
                    <td>
                            ${bok.price}
                    </td>
                    <td>
                            ${bok.press}
                    </td>
                    <td>
                            ${bok.author}
                    </td>
                    <td>
                            ${bok.remark}
                    </td>
                    <td>
                        <button type="button" class="layui-btn" onclick="updateBook('${bok.id}')">
                            <i class="layui-icon">&#xe642;</i>更新
                        </button>
                        <button type="button" class="layui-btn" onclick="deleteBook(${bok.id})">
                            <i class="layui-icon">&#xe640;</i>删除
                        </button>
                    </td>
                </tr>

            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
<script>
    var layer;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    function updateBook(bid) {
        console.log(bid);
        location.href = "/book/getBookByID?bid=" + bid


    }

    function deleteBook(val) {
        let bid = Number.parseInt(val);
        console.log(bid);
        location.href = "/book/del?bid=" + bid;

    }

    function addBook() {
        location.href = "/addDialog.jsp"
    }

    function search() {
        let bname = $("#Searchinput").val();
        location.href = "/book/findBookByName?bookname=" + bname;
    }
</script>
